<section class="section">
  <h2>Radios &amp; Checkboxes</h2>
  <p>
    <input type="radio" name="radio" id="radio-1" checked />
    <label for="radio-1">Radio 1</label><br />
    <input type="radio" name="radio" id="radio-2" />
    <label for="radio-2">Radio 2</label><br />
    <input type="radio" name="radio" id="radio-3" />
    <label for="radio-3">Radio 3</label><br />
    <input type="radio" name="radio" id="radio-4" disabled />
    <label for="radio-4">Radio 4 (disabled)</label>
  </p>
  <p>
    <input type="checkbox" id="checkbox-1" /> <label for="checkbox-1">Checkbox</label><br />
    <input type="checkbox" id="checkbox-2" checked />
    <label for="checkbox-2">Checked Checkbox</label><br />
    <input type="checkbox" id="checkbox-3" disabled />
    <label for="checkbox-3">Disabled Checkbox</label><br />
    <input type="checkbox" id="checkbox-3" disabled checked />
    <label for="checkbox-3">Disabled Checked Checkbox</label>
  </p>
  <details class="demo">
    <summary>View code</summary>
    <pre><code>&lt;p&gt;
  &lt;input type="radio" name="radio" id="radio-1" checked /&gt;
  &lt;label for="radio-1"&gt;Radio 1&lt;/label&gt;&lt;br /&gt;
  &lt;input type="radio" name="radio" id="radio-2" /&gt;
  &lt;label for="radio-2"&gt;Radio 2&lt;/label&gt;&lt;br /&gt;
  &lt;input type="radio" name="radio" id="radio-3" /&gt;
  &lt;label for="radio-3"&gt;Radio 3&lt;/label&gt;&lt;br /&gt;
  &lt;input type="radio" name="radio" id="radio-4" disabled /&gt;
  &lt;label for="radio-4"&gt;Radio 4 (disabled)&lt;/label&gt;
&lt;/p&gt;
&lt;p&gt;
  &lt;input type="checkbox" id="checkbox-1" /&gt; &lt;label for="checkbox-1"&gt;Checkbox&lt;/label&gt;&lt;br /&gt;
  &lt;input type="checkbox" id="checkbox-2" checked /&gt;
  &lt;label for="checkbox-2"&gt;Checked Checkbox&lt;/label&gt;&lt;br /&gt;
  &lt;input type="checkbox" id="checkbox-3" disabled /&gt;
  &lt;label for="checkbox-3"&gt;Disabled Checkbox&lt;/label&gt;
&lt;/p&gt;</code></pre>
  </details>
</section>